import { PageContainer } from '@ant-design/pro-components';
import { history, useModel } from '@umijs/max';
import { Card, Col, Input, Row, Space, theme } from 'antd';
import React, { useState } from 'react';
import CreateForm from './components/CreateForm';
import InfoCard from './components/InfoCard/index';
// 与后端约定的响应数据格式
interface TableItem {
  label1: string;
  label2: string;
  label3: string;
  label4: string;
}

const { Search } = Input;
const SceneLinkage: React.FC = () => {
  const { token } = theme.useToken();
  const onCancel = () => {};
  const [tableList, setTableList] = useState<TableItem[]>([
    {
      label1: '高压喷淋TCA',
      label2: '23sx88dX9293',
      label3: '13s323dX9293',
      label4: '3xe33',
    },
    {
      label1: '高压喷淋TCA',
      label2: '23sx88dX9293',
      label3: '13s323dX9293',
      label4: '3xe33',
    },
    {
      label1: '低压喷淋TCA',
      label2: '23sx88dX9293',
      label3: '13s323dX9293',
      label4: '3xe33',
    },
    {
      label1: '高压喷淋TCA',
      label2: '23sx88dX9293',
      label3: '13s323dX9293',
      label4: '3xe33',
    },
    {
      label1: '',
      label2: '23sx88dX9293',
      label3: '13s323dX9293',
      label4: '3xe33',
    },
  ]);

  // 提交
  const onSubmit = (value: Record<string, any>) => {
    onCancel();
    history.push('/ruleEngine/sceneLinkage/SceneSave');
  };
  const extraContent = (
    <Space>
      {/* 添加弹框 */}
      <CreateForm onCancel={onCancel} onSubmit={onSubmit}></CreateForm>
      <Search placeholder="请输入名称" onSearch={() => ({})} />
    </Space>
  );
  const { initialState } = useModel('@@initialState');

  return (
    <PageContainer>
      <Card
        style={{
          borderRadius: 8,
        }}
        bodyStyle={{
          padding: 16,
        }}
        extra={extraContent}
      >
        <div className="card-row-box">
          <Row gutter={[16, 16]}>
            {tableList.map((item: TableItem, index) => {
              return (
                <Col span={6} key={index}>
                  <InfoCard
                    index={index + 1}
                    href="https://umijs.org/docs/introduce/introduce"
                    title={item.label1}
                  />
                </Col>
              );
            })}
          </Row>
        </div>
      </Card>
    </PageContainer>
  );
};

export default SceneLinkage;
